<template>
  <div ref="lottieContainer" class="lottie-container" v-if="isLoading"></div>
  <div class="assets-container" v-else>
    <div class="assets-header">
      <div class="header-name">固定资产可视化</div>
    </div>
    <detailDialog
      :dialogTableVisible="dialogTableVisible"
      :dialogZczt="dialogZczt"
      :dialogName="dialogName"
      @close="closeDialog"
    />
    <div class="assets-overview">
      <div
        class="overView-item"
        v-for="item in assetsOverview"
        @click="openDialog(item)"
        :style="{ cursor: item.isClick ? 'pointer' : 'default' }"
      >
        <div class="item-name">
          <div class="name">{{ item.name }}</div>
          <div class="img">
            <img :src="item.imgsrc" alt="" />
          </div>
        </div>
        <div class="item-value">{{ assetsOver[item.valueName] }}</div>
      </div>
    </div>
    <div class="chart-container">
      <departmentShow :assetType="assetType" />
      <typeShow :departmentAssets="departmentAssets" />
    </div>
    <departmentInfo
      style="margin-top: 15px"
      :departmentAssetDetail="departmentAssetDetail"
    />
    <div class="chart-container">
      <noAssest
        :assetWarning="assetWarning"
        :zerosuppliesList="zerosuppliesList"
        :onesuppliesList="onesuppliesList"
      />
      <personelAssets />
    </div>
    <SuppliesShow style="margin-top: 15px"></SuppliesShow>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import departmentShow from "@/components/assest/departmentShow.vue";
import typeShow from "@/components/assest/typeShow.vue";
import departmentInfo from "@/components/assest/departmentInfo.vue";
import noAssest from "@/components/assest/noAssest.vue";
import personelAssets from "@/components/assest/personelAssets.vue";
import detailDialog from "@/components/assest/detailDialog.vue";
import { getAssestReportData, getsuppliesList } from "@/api/index";
import lottie from "lottie-web";
import loading from "@/assets/lottie/loading.json";
import SuppliesShow from "@/components/assest/suppliesShow.vue";
const isLoading = ref(true);
const dialogTableVisible = ref(false);
const dialogZczt = ref("");
const openDialog = (item) => {
  if (item.isClick) {
    dialogTableVisible.value = true;
    dialogZczt.value = item.zczt;
    dialogName.value = item.name;
  }
};
const closeDialog = () => {
  dialogZczt.value = "";
  dialogTableVisible.value = false;
  dialogName.value = "";
};
onMounted(() => {
  if (lottieContainer.value) {
    lottie.loadAnimation({
      container: lottieContainer.value,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: loading, // 替换为你的动画JSON数据
    });
  }
});
const lottieContainer = ref(null);
const dialogName = ref("");
// 资产概览
const assetsOverview = reactive([
  {
    name: "总资产数量",
    valueName: "assetstotal",
    imgsrc: new URL("@/assets/img/assetslogo.png", import.meta.url).href,
    isClick: true,
    zczt: "",
  },
  {
    name: "在用资产",
    valueName: "activeAssets",
    imgsrc: new URL("@/assets/img/useassets.png", import.meta.url).href,
    isClick: true,
    zczt: "1",
  },
  {
    name: "闲置资产",
    valueName: "idleAssets",
    imgsrc: new URL("@/assets/img/leave.png", import.meta.url).href,
    isClick: true,
    zczt: "0",
  },
  {
    name: "报废资产",
    valueName: "scrapAssetCount",
    imgsrc: new URL("@/assets/img/lose.png", import.meta.url).href,
    isClick: true,
    zczt: "2",
  },
  {
    name: "其他异常状态资产",
    valueName: "otherCount",
    imgsrc: new URL("@/assets/img/otherstatus.png", import.meta.url).href,
    isClick: true,
    zczt: "null",
  },
  {
    name: "未分配资产人数",
    valueName: "unassignedAssets",
    imgsrc: new URL("@/assets/img/member.png", import.meta.url).href,
    isClick: false,
  },
]);
// 部门资产
const departmentAssetDetail = ref([]);
// 资产预警
const assetWarning = ref([]);
// 资产概览数据
const assetsOver = ref({
  assetstotal: 0,
  activeAssets: 0,
  idleAssets: 0,
  unassignedAssets: 0,
  scrapAssetCount: 0,
  otherCount: 0,
});
// 部门资产数据
const departmentAssets = ref([]);
// 资产类型分布
const assetType = ref([]);
const getReportData = async () => {
  isLoading.value = true;
  const { data: res } = await getAssestReportData();
  if (res.code == 0) {
    setTimeout(() => {
      isLoading.value = false;
    }, 1000);
    assetsOver.value.assetstotal = res.data.assetstotal;
    assetsOver.value.activeAssets = res.data.activeAssets;
    assetsOver.value.idleAssets = res.data.idleAssets;
    assetsOver.value.scrapAssetCount = res.data.scrapAssetCount;
    assetsOver.value.unassignedAssets = res.data.unassignedAssets;
    assetsOver.value.otherCount =
      res.data.assetstotal -
      res.data.activeAssets -
      res.data.idleAssets -
      res.data.scrapAssetCount;
    departmentAssets.value = res.data.departmentAssets;
    departmentAssetDetail.value = res.data.departmentAssetDetail;
    assetWarning.value = res.data.assetWarning;
    window.localStorage.setItem(
      "assetWarning",
      JSON.stringify(res.data.assetWarning)
    );
    assetType.value = res.data.departmentAssetType;
  }
};
// 剩余0个的耗材
const zerosuppliesList = ref([]);
// 剩余1个的耗材
const onesuppliesList = ref([]);
// 获取耗材配件列表
getsuppliesList({ page: 1, size: 100, keyword: "" }).then(({ data: res }) => {
  if (res.code == 0) {
    res.data.list.forEach((item) => {
      if (item.kc == 0) {
        zerosuppliesList.value.push(item);
      } else if (item.kc == 1) {
        onesuppliesList.value.push(item);
      }
    });
  }
});
getReportData();
</script>

<style scoped lang="less">
@import "@/styles/common.less";

.lottie-container {
  width: 100%;
  height: 100vh;
}
.assets-container {
  .page-container();
}
</style>
